<template>
  <view class="container">
    <CustomHeader  />
    <view class="top-img">
      <view class="top-img-title">BSA血液状态分析</view>
      <view class="top-img-desc">Blood State Analysis</view>
      <image src="https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/bsa/1.png" mode="widthFix" />
    </view>
    <view class="desc-1">
      通过对血液样本的检测室检测，评估人体生理健康状态、筛查亚健康状态，监测阶段效果或判断预测的重要检测手段。其检测项目涵盖多个维度，结果需结合实际情况和其它检查综合解读。
    </view>

    <!-- 常见血液检测项目及定义 -->
     <view class="desc-2">
      <view class="section-title">常见血液检测项目及定义</view>
      <image class="card-img" src="https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/bsa/2.png" mode="widthFix" />
     </view>

    <!-- 检测注意事项 -->
     <view class="desc-3">
      <view class="notice-title">检测注意事项</view>
      <view class="notice-title-en">Project and Significanc</view>
        <image class="notice-img" src="https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/bsa/3.png" mode="widthFix" />
     </view>

    <!-- 临床应用场景 -->
     <view class="desc-4">
      <view class="title">药物影响：</view>
      <view class="desc desc-top">
        某些药物（如抗生素、避孕药、降糖药）可能干扰检测结果，需提前告知用药史。
      </view>
      <view class="title">生理影响：</view>
      <view class="desc">
        女性生理期、孕期。
      </view>
     </view>

    <!-- 结果解读要点 -->
    <view class="desc-5">
      <view class="title">临床应用场景</view>
      <view class="desc">
        常规：筛查免疫力低下、贫血、心脑血管、三高等慢性病风险。
      </view>
      <image class="bottom-img" src="https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/bsa/4.png" mode="widthFix" />
      <view class="title">结果解读要点</view>
      <view class="sub-title">
        <view class="title">参考范围：</view>
        <view class="desc desc-top">
           不同实验室、检测室因检测方法不同，参考范围可能略有差异，需以检测报告为准。
        </view>
        <view class="title">专业解读：</view>
        <view class="desc">
          血液检测结果需由检测师通过镜像结果分析，避免自行诊断。
        </view>
      </view>
    </view>

    <view class="desc-6">
      <image  src="https://jyoungy.oss-cn-beijing.aliyuncs.com/jyy-mini-sale/bsa/5.png" mode="widthFix" />
      <view class="bottom-desc">
        BSA血液状态分析是中西医理论相结合的检测环节中最直观应用最广泛的检测手段之一，能为疾病预防、诊断和治疗提供关键信息。若检测结果异常，也不必担心，但需及时咨询医生，制定后续检查计划。保持定期体检的习惯，有助于早期发现健康隐患，实现 “早干预、早治疗”。
      </view>
      <view class="line"></view>
    </view>

    <!-- 底部介绍说明 -->

    <!-- 底部导航栏 -->
    <CustomTabBar :activeIndex="1" />
  </view>
</template>

<script>
import CustomTabBar from '@/components/CustomTabBar.vue'
import CustomHeader from '@/components/CustomHeader.vue'
export default {
  components: { CustomTabBar, CustomHeader }
}
</script>

<style scoped lang="scss">
.container {
  padding: 0 0 150rpx 0;
  font-size: 28rpx;
  background: #fff;
}
.desc-1 {
  color: #2f2f2f;
  margin: 0 auto;
  padding: 80rpx 59rpx;
  background-color: #F5F6FA;
}

.desc-2 {
  padding: 107rpx 0 85rpx 0;
  .card-img {
    width: 85%;
    display: block;
    margin: 0 auto;
  }
  .section-title {
    margin: 0;
    color: #1A1A1A;
    font-size: 32rpx;
    font-weight: bold;
    padding-left: 57rpx;  
  }
}

.desc-3 {
  position: relative;
  image {
    width: 100%;
  }
  .notice-title {
    position: absolute;
    bottom: 131rpx;
    color: #fff;
    font-size: 32rpx;
    left: 58rpx;
    font-weight: bold;
  }
  .notice-title-en {
    position: absolute;
    color: #fff;
    bottom: 88rpx;
    left: 58rpx;
    font-size: 32rpx;
    font-weight: bold;
  }

}
.desc-4 {
  padding: 69rpx;
  background-color: #F5F6FA;
  font-size: 22rpx;
  .title {
    color: #2f2f2f;
    font-weight: bold;
  }
  .desc {
    color: #808080;
    line-height: initial;
  }
  .desc-top {
    margin-bottom: 40rpx;
  }
}

.desc-5 {
  padding-top: 77rpx;
  .title {
    color: #000;
    font-weight: bold;
    font-size: 32rpx;
    margin-left: 60rpx;
  }

  image {
    width: 90%;
    display: block;
    margin: 0 auto;
    margin-bottom: 103rpx;
    margin-top: 31rpx;
  }

  .desc {
    color: #808080;
    margin-left: 60rpx;
    line-height: initial;
    font-size: 22rpx;
    margin-top: 26rpx;
  }
  .sub-title {
    margin-top: 48rpx;
    font-size: 22rpx;
    .title {
      color: #2f2f2f;
      font-size: 22rpx;
      font-weight: bold;
    }
    .desc {
      color: #808080;
      font-size: 22rpx;
      line-height: initial;
      margin-top: 0;
    }
    .desc-top {
      margin-bottom: 40rpx;
    }
  }
}
.top-img {
  position: relative;
  width: 100%;

  .top-img-title {
    position: absolute;
    left: 60rpx;
    bottom: 143rpx;
    color: #fff;
    font-size: 36rpx;
    font-weight: bold;
  }
  .top-img-desc {
    position: absolute;
    left: 60rpx;
    bottom: 96rpx;
    color: #fff;
    font-size: 36rpx;
    font-weight: bold;
  }
  image {
    width: 100%;
  }
}

.desc-6 {
  image {
    width: 100%;
    display: block;
    margin: 0 auto;
    margin-top: 98rpx;
    margin-bottom: 73rpx;
  }
  .bottom-desc {
    color: #000;
    font-size: 22rpx;
    width: 80%;
    margin: 0 auto;
  }
  .line {
    width: 75%;
    margin: 76rpx 129rpx 90rpx 56rpx;
    height: 1rpx;
    background-color: #808080;
  }
}

// .topView {
//   position: relative;
//   .top-nav {
//     position: absolute;
//     top: 0;
//     left: 0;
//     width: 100%;
//     text-align: center;
//     color: #fff;
//     font-size: 32rpx;
//     font-weight: bold;
//   }
// }
</style> 